<template>
  <div>
    <!-- 顶部操作部分 -->
    <div>
      <ButtonGroup size="default">
        <Button @click="monthlyExportFlag = true">月考导出</Button>
      </ButtonGroup>
      <br><br>
    </div>
    <!-- 搜索条件 -->
    <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
      考试计划:<Select v-model="searchKey" class="search-col">
      <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
    </Select>
      考试人员:<Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
      时间维度:<DatePicker type="daterange" @on-change="handleChange" placeholder="Select date" style="width: 200px"></DatePicker>
      所属组别:<Select v-model="searchKey" class="search-col">
      <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
    </Select>
      <Button class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
    </div>
    <div style="height: 20px"></div>
    <!-- 表格部分 -->
    <div>
      <Table
        :data="insideTableData"
        :columns="insideColumns"
        @on-select="singleSelectionMethod"
        stripe
        border
      >
        <template slot-scope="{ row }" slot="content"></template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="success" icon="md-eye" size="small" style="margin-right: 5px" @click="show(index)">查阅</Button>
        </template>
      </Table>
    </div>
    <!-- 分页 -->
    <div>
      <Page :total="2" show-sizer show-total />
    </div>
    <!-- 月考导出 -->
    <Modal
      v-model="monthlyExportFlag"
      title="月考导出"
      loading
      @on-ok="addNewTemplateFlag">
      <!-- 新增的表单 -->
      <div>
        选择导出成绩的年月:<DatePicker type="date" placeholder="Select date" ></DatePicker>
      </div>
    </Modal>
    <!-- 查阅抽屉 -->
    <Drawer :closable="false" width="640" v-model="lookUpFlag">
      <p :style="pStyle">User Profile</p>
      <p :style="pStyle">Personal</p>
      <div class="demo-drawer-profile">
        <Row>
          <Col span="12">
            Full Name: Aresn
          </Col>
          <Col span="12">
            Account: aresn@aresn.com
          </Col>
        </Row>
        <Row>
          <Col span="12">
            City: BeiJing
          </Col>
          <Col span="12">
            Country: China
          </Col>
        </Row>
        <Row>
          <Col span="12">
            Birthday: May 14, 1991
          </Col>
          <Col span="12">
            Website: <a href="https://dev.iviewui.com" target="_blank">https://dev.iviewui.com</a>
          </Col>
        </Row>
        Message: Hello, Developer
      </div>
      <Divider />
      <p :style="pStyle">Company</p>
      <div class="demo-drawer-profile">
        <Row>
          <Col span="12">
            Position: Programmer
          </Col>
          <Col span="12">
            Responsibilities:Coding
          </Col>
        </Row>
        <Row>
          <Col span="12">
            Department: Map visualization
          </Col>
        </Row>
        Skills:C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
      </div>
      <Divider />
      <p :style="pStyle">Contacts</p>
      <div class="demo-drawer-profile">
        <Row>
          <Col span="12">
            Email: admin@aresn.com
          </Col>
          <Col span="12">
            Phone Number: +86 18888888888
          </Col>
        </Row>
        <Row>
          <Col span="12">
            GitHub: <a href="https://github.com/view-design/ViewUI" target="_blank">https://github.com/view-design/ViewUI</a>
          </Col>
        </Row>
      </div>
    </Drawer>
  </div>
</template>

<script>
import './index.less'
export default {
  name: 'cjcx',
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    size: String,
    width: {
      type: [Number, String]
    },
    height: {
      type: [Number, String]
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    highlightRow: {
      type: Boolean,
      default: false
    },
    rowClassName: {
      type: Function,
      default () {
        return ''
      }
    },
    context: {
      type: Object
    },
    noDataText: {
      type: String
    },
    noFilteredDataText: {
      type: String
    },
    disabledHover: {
      type: Boolean
    },
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * @description 全局设置是否可编辑
     */
    editable: {
      type: Boolean,
      default: false
    },
    /**
     * @description 是否可搜索
     */
    searchable: {
      type: Boolean,
      default: true
    },
    /**
     * @description 搜索控件所在位置，'top' / 'bottom'
     */
    searchPlace: {
      type: String,
      default: 'top'
    }
  },
  /**
   * Events
   * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
   * @on-cancel-edit 返回值 {Object} 同上
   * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
   */
  data () {
    return {
      dataValue: null, // 时间维度选择
      insideColumns: [
        {
          key: 'templateName',
          title: '试卷名称'
        },
        {
          key: 'subordinateToPlan',
          title: '参考人'
        },
        {
          key: 'totalPoints',
          title: '交卷时间'
        },
        {
          key: 'passingGrade',
          title: '评卷人'
        },
        {
          key: 'creator',
          title: '分数'
        },
        {
          key: 'createTime',
          title: '创建时间'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ], // 表格列数据
      insideTableData: [
        {
          templateName: '试卷名称1',
          subordinateToPlan: '参考人1',
          totalPoints: '交卷时间1',
          passingGrade: '评卷人1',
          creator: '分数1',
          createTime: '创建时间1',
        },
        {
          templateName: '试卷名称2',
          subordinateToPlan: '参考人2',
          totalPoints: '交卷时间2',
          passingGrade: '评卷人2',
          creator: '分数2',
          createTime: '创建时间2',
        },
        {
          templateName: '试卷名称3',
          subordinateToPlan: '参考人3',
          totalPoints: '交卷时间3',
          passingGrade: '评卷人3',
          creator: '分数3',
          createTime: '创建时间3',
        }
      ], // 表格记录数据
      monthlyExportFlag: false,  //月考导出弹窗标志位
      lookUpFlag: false,       // 查阅弹出标志
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      }
    }
  },
  methods: {
    handleChange(daterange) {
      this.dataValue = daterange;
    },
    show (index) {
      this.lookUpFlag = true;
    }
  }
}
</script>
<style>
  .demo-drawer-profile{
    font-size: 14px;
  }
  .demo-drawer-profile .ivu-col{
    margin-bottom: 12px;
  }
</style>
